<template>
  <div>
    <div class="todoHeader">
      <el-input
        style="width: 40%; margin-right: 10px"
        v-model="inputdata"
        placeholder="请输入代办项"
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addTodo()"
      ></el-button>
    </div>
    <div class="totolist">
      <el-table
        :data="todos"
        height="400px"
        size="mini"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column prop="todo" label="今日待办项" width="180">
        </el-table-column>

        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1"><el-tag>完成</el-tag></span>
            <span v-else><el-tag type="danger">未完成</el-tag></span>
          </template>
        </el-table-column>

        <el-table-column prop="completeTime" label="完成时间">
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.completeTime == scope.row.createTime ||
                scope.row.completeTime == null ||
                scope.row.completeTime == undefined
              "
              >待完成</span
            >
            <span v-else
              ><el-tag>{{ scope.row.completeTime }}</el-tag></span
            >
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">
              <el-button
                type="primary"
                size="small"
                @click="updataStatus(scope.row.todolistId)"
                >未完成</el-button
              >
            </span>
            <span v-else>
              <el-button
                type="primary"
                size="small"
                @click="updataStatus(scope.row.todolistId)"
                >完成</el-button
              >
            </span>
            <el-button
              type="danger"
              size="small"
              style="float: right"
              @click="deleteTodo(scope.row.todolistId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="todoFooter" style="margin-top: 15px">
      <span style="margin-left: 10px; font-size: 10px">
        <el-progress :percentage="percentage"></el-progress>
      </span>
    </div>

    <!-- <el-dialog
      title="提示"
      :visible.sync="isHaveNoOverTodo"
      width="30%"
      :before-close="handleClose"
    >
      <span
        >以往有{{
          noOverTodoNum
        }}条待办想未完成，是否添加到当天的待办项中。</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="isHaveNoOverTodo = false">取 消</el-button>
        <el-button type="primary" @click="isAdd">确 定</el-button>
      </span>
    </el-dialog> -->

    <el-drawer
      :title="todoTitle"
      :visible.sync="drawer"
      direction="ltr"
      :before-close="CloseSummarize"
    >
      <el-container>
        <el-main>
          <el-input
            v-if="summarizeFalse"
            type="textarea"
            autosize
            placeholder="请输入描述内容"
            v-model="summarize.title"
          >
          </el-input>
          <span v-else>{{
            summarize.title == "" ? "暂无描述。。。" : summarize.title
          }}</span></el-main
        >

        <el-footer
          ><div class="dialog-footer">
            <template v-if="summarizeFalse">
              <el-button @click="CloseSummarize">取消编辑</el-button>
              <el-button type="primary" @click="updateSummrzie">提交</el-button>
            </template>
            <template v-else>
              <el-button type="primary" @click="summarizeFalse = true"
                >编辑</el-button
              >
              <el-button @click="drawer = false">关闭</el-button>
            </template>
          </div></el-footer
        >
      </el-container>
    </el-drawer>
  </div>
</template>

<script>
import todoApi from "@/api/todo";
import summrizeApi from "@/api/summrize";

export default {
  name: "TodoList",
  data() {
    return {
      // 显示描述对话框
      drawer: false,
      // 描述对话框是否为编辑状态
      summarizeFalse: false,
      // 描述内容
      summarize: {
        title: "",
        todoId: "",
      },
      // 进度条进度
      percentage: 0,
      // 待办输入项
      inputdata: "",
      // 当天所有代办项
      todos: [],
      // 用户
      user: {},
      // 完成待办数量
      overTodoNum: 0,
      // 当天所有待办项数
      allTodoNum: 0,
      // 以往没完成待办数量
      noOverTodoNum: 0,
      // 用户是否有未完成的todo
      isHaveNoOverTodo: false,
      // 选中某条数据
      currentRow: {},
      // 显示描述对话框
      isSummarize: false,
      // 打开抽屉标识
      openFlag: false,
      // 描述内容
      todoTitle: "快点编辑一下描述吧~",
    };
  },
  methods: {
    // 关闭描述抽屉
    CloseSummarize(done) {
      this.summarizeFalse = false;
      this.drawer = false;
    },
    // 实现单选表格
    handleCurrentChange(val) {
      this.currentRow = val;
      // console.log(this.currentRow);
      if (val == null || val == undefined) {
        return;
      }
      if (!this.openFlag) {
        summrizeApi.getSummrizeById(val.todolistId).then((resp) => {
          // 设置描述内容
          this.summarize = resp.data;
          this.todoTitle = this.currentRow.todo;
          this.drawer = true;
        });
      }
      this.openFlag = false;
    },
    // 更新描述信息
    updateSummrzie() {
      const summarize = {
        title: this.summarize.title,
        todoId: this.currentRow.todolistId,
      };

      summrizeApi.updateSummarize(summarize).then((resp) => {
        this.$message(resp.message);
        this.CloseSummarize();
      });
    },

    // 获取小数点后两位
    getBit(value, bit = 2) {
      let str = value.toString();
      let strIndex = str.indexOf(".");
      if (strIndex == -1) return str;
      str = str.substring(0, strIndex + bit);
      return str;
    },
    // 进度条
    format(overTodoNum) {
      return overTodoNum === allTodoNum ? "满" : `${percentage}%`;
    },
    // 获取所有没完成的todo数据
    getAllNoOverTodos(userId) {
      todoApi.getAllNoOverTodos(userId).then((resp) => {
        // 未完成完成的todo条数
        this.noOverTodoNum = resp.data.length;
        if (resp.data.length !== 0) {
          this.isHaveNoOverTodo = true;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 将以往未完成的待办项添加到当日的待办项中
    isAdd() {
      todoApi.isAdd(this.$store.state.user.userId).then((resp) => {
        this.$message({
          message: resp.message,
          type: "success",
        });
        this.isHaveNoOverTodo = false;
        //
        this.getTodoByNowDay(this.$store.state.user.userId);
      });
    },

    // 获取当天所有todo数据
    getTodoByNowDay(userId) {
      todoApi.getTodoByDay(userId).then((resp) => {
        this.todos = resp.data;

        // 完成的todo条数
        this.overTodoNum = 0;
        for (var i = 0; i < resp.data.length; i++) {
          if (resp.data[i].status == 1) {
            this.overTodoNum += 1;
          }
        }

        // 所有Todo的条数
        this.allTodoNum = resp.data.length;
        // 进度条
        if (this.allTodoNum !== 0) {
          let perStr = this.getBit(this.overTodoNum / this.allTodoNum);
          this.percentage = perStr * 100;
        }
      });
    },

    // 添加待办项
    addTodo() {
      // 如果待办项为空则提示用户输入
      if (this.inputdata == "" || this.inputdata == undefined) {
        this.$message("请输入待办项");
        return;
      }

      // 如果待办项为超过100的长度则提示用户带办项太长
      if (this.inputdata.length >= 50) {
        this.$message("字数不能超过50个哦~");
        return;
      }

      todoApi
        .addTodo({
          todo: this.inputdata,
          userId: this.$store.state.user.userId,
        })
        .then((resp) => {
          // 显示添加成功提示
          this.$message({
            message: resp.message,
            type: "success",
          });
          // 更新数据
          this.getTodoByNowDay(this.$store.state.user.userId);
          // 清空输入框
          this.inputdata = "";
        });
    },

    // 更新状态
    updataStatus(todoId) {
      this.openFlag = true;
      todoApi.updataStatus(todoId).then((resp) => {
        // 显示添加成功提示
        this.$message({
          message: resp.message,
          type: "success",
        });
        // 更新数据
        this.getTodoByNowDay(this.$store.state.user.userId);
      });
    },

    // 删除todo
    deleteTodo(todoId) {
      this.openFlag = true;
      todoApi.deleteTodo(todoId).then((resp) => {
        // 显示删除成功提示
        this.$message({
          message: resp.message,
          type: "success",
        });
        // 更新数据
        this.getTodoByNowDay(this.$store.state.user.userId);
      });
    },
  },
  created() {
    this.getAllNoOverTodos(this.$store.state.user.userId);
    this.getTodoByNowDay(this.$store.state.user.userId);
  },
};
</script>

<style scoped>
.el-col {
  padding: 20px;
}
</style>
